import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  TouchableOpacity,
  FlatList,
  ScrollView,
} from 'react-native';
import {
  ActivityIndicator,
} from 'antd-mobile-rn';
import { connect } from 'react-redux';
import moment from 'moment';
import _ from 'lodash';

import * as reportActions from './actions/reportActions';
import { i18n } from '../../i18n';
import { scaleSize } from '../../utils/screen';
import FontText from '../components/FontText';
import DateTimePicker from 'react-native-modal-datetime-picker';

class Report extends React.Component {
  constructor(props) {
    super(props);

    const today = moment().format('YYYY-MM-DD');
    this.state = {
      dateFilter: today,
      employeesFilter: 'All Employees',
      isDateTimePickerVisible: false,
    };
  }

  componentDidMount() {
    const { dateFilter } = this.state;

    this.props.getSummaryReport(dateFilter);
  }

  goBack() {
    this.props.navigation.goBack();
  }

  showDatePicker() {
    this.setState({ isDateTimePickerVisible: true });
  }

  hideDatePicker() {
    this.setState({ isDateTimePickerVisible: false });
  }

  updateDateFilter(date) {
    const dateFilter = moment(date).format('YYYY-MM-DD');

    this.setState({
      dateFilter
    });

    this.hideDatePicker();

    this.props.getSummaryReport(dateFilter);
  }

  renderActivityIndicator() {
    const { report } = this.props;
    const needIndicator = report.loading;
    const indicatorText = i18n.t('report.indicator.loading');

    return (
      <ActivityIndicator
        animating={needIndicator}
        toast
        size='small'
        text={indicatorText}
      />
    );
  }

  renderHeader() {
    const _styles = headerStyles;

    return (
      <View
        style={_styles.headerContainer}
      >
        <View
          style={_styles.headerLeftBox}
        >
          <TouchableOpacity
            activeOpacity = {0.8}
            onPress={() => this.goBack()}
            style={_styles.headerBack}
          >
            <FontText style={_styles.headerText} font={'book'}>&lt; </FontText>
            <FontText style={_styles.headerText} font={'book'}>{i18n.t('btns.back')}</FontText>
          </TouchableOpacity>
        </View>
        <View
          style={_styles.headerMiddleBox}
        >
          <TouchableOpacity
           style={_styles.headerReportType}
          >
            <FontText style={_styles.headerText} font={'book'}>Summary</FontText>
          </TouchableOpacity>
        </View>
        <View
          style={_styles.headerRightBox}
        >
        </View>
      </View>
    );
  }

  renderFilterActionBar() {
    const _styles = filterBarStyles;
    const { dateFilter, employeesFilter, isDateTimePickerVisible } = this.state;

    return (
      <View
        style={_styles.filterActionBar}
      >
        <View
          style={_styles.employeesFilterBox}
        >
          <TouchableOpacity
            activeOpacity = {0.8}
            style={_styles.employeesFilterSelect}
          >
            <FontText style={_styles.filterText} font={'book'}>{ employeesFilter }</FontText>
          </TouchableOpacity>
        </View>
        <View
          style={_styles.dateFilterBox}
        >
          <TouchableOpacity
            activeOpacity = {0.8}
            style={_styles.dateFilterSelect}
            onPress={() => this.showDatePicker()}
          >
            <FontText style={_styles.filterText} font={'book'}>{ dateFilter }</FontText>
          </TouchableOpacity>
        </View>
        <View
          style={_styles.dummyRightBox}
        >
        </View>
        <DateTimePicker
          date={new Date(dateFilter)}
          isVisible={isDateTimePickerVisible}
          onConfirm={(date) => this.updateDateFilter(date)}
          onCancel={() => this.hideDatePicker()}
          maximumDate={new Date()}
        />
      </View>
    );
  }

  renderReportContent() {
    const _styles = reportContentStyles;

    return (
      <View
        style={_styles.reportContentContainer}
      >
        <ScrollView>
          {this.renderReportSummary()}
        </ScrollView>
      </View>
    );
  }

  renderReportSummary() {
    const _styles = reportTableStyles;
    const { report } = this.props;
    const { summary } = report;

    if (_.isEmpty(report)) {
      return null;
    }

    return (
      <View
        style={_styles.reportTableContainer}
      >
        <View
          style={_styles.reportTableTitle}
        >
          <FontText style={_styles.reportTableText} font={'bold'}>Totals</FontText>
        </View>
        <View
          style={_styles.reportTableBody}
        >
          <View
            style={_styles.reportTableRowLightGrey}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Order</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.order }</FontText>
          </View>
          <View
            style={_styles.reportTableRow}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Discount</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.discount }</FontText>
          </View>
          <View
            style={_styles.reportTableRowLightGrey}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Refund</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.refund }</FontText>
          </View>
          <View
            style={_styles.reportTableRow}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Pay In</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.payin }</FontText>
          </View>
          <View
            style={_styles.reportTableRowLightGrey}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Pay Out</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.payout }</FontText>
          </View>
          <View
            style={_styles.reportTableRow}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Tip</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.tip }</FontText>
          </View>
          <View
            style={_styles.reportTableRowLightGrey}
          >
            <FontText style={_styles.reportTableText} font={'book'}>Tax</FontText>
            <FontText style={_styles.reportTableText} font={'book'}>${ summary.tax }</FontText>
          </View>
          <View
            style={_styles.reportTableRowHighlight}
          >
            <FontText style={_styles.reportTableText} font={'bold'}>Total</FontText>
            <FontText style={_styles.reportTableText} font={'bold'}>${ summary.total }</FontText>
          </View>
        </View>
      </View>
    );
  }

  render() {
    const _styles = viewStyles;
    return (
      <View
        style={_styles.reportView}
      >
        {this.renderActivityIndicator()}
        {this.renderHeader()}
        {this.renderFilterActionBar()}
        {this.renderReportContent()}
      </View>
    );
  }
};

/* StyleSheet =============================================================== */

const viewStyles = StyleSheet.create({
	reportView: {
    flex: 1,
    flexDirection: 'column',
	},
});

const headerStyles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: scaleSize(80),
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
  },
  headerLeftBox: {
    flex: 1,
    justifyContent: 'center',
  },
  headerBack: {
    paddingLeft: scaleSize(20),
    flexDirection: 'row',
  },
  headerBackArrow: {
    width: scaleSize(32),
    height: scaleSize(32),
  },
  headerMiddleBox: {
    flex: 1,
    justifyContent: 'center',
  },
  headerReportType: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  headerRightBox: {
    flex: 1,
  },
  headerText: {
    color: 'steelblue',
    fontSize: scaleSize(30),
  },
});

const filterBarStyles = StyleSheet.create({
  filterActionBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: scaleSize(80),
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
  },
  employeesFilterBox: {
    flex: 1,
    justifyContent: 'center',
  },
  employeesFilterSelect: {
    paddingLeft: scaleSize(20),
    flexDirection: 'row',
  },
  dateFilterBox: {
    flex: 1,
    justifyContent: 'center',
  },
  dateFilterSelect: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  dummyRightBox: {
    flex: 1,
    justifyContent: 'center',
  },
  filterText: {
    color: 'steelblue',
    fontSize: scaleSize(30),
  },
});

const reportContentStyles = StyleSheet.create({
  reportContentContainer: {
    paddingHorizontal: scaleSize(40),
    flex: 1,
    flexDirection: 'column',
  },
});

const reportTableStyles = StyleSheet.create({
  reportTableContainer: {
    flex: 1,
    flexDirection: 'column',
    marginVertical: scaleSize(30),
  },
  reportTableTitle: {
    padding: scaleSize(20),
    fontWeight: 'bold',
  },
  reportTableText: {
    color: '#000',
    fontSize: scaleSize(30),
  },
  reportTableBody: {
    borderTopWidth: scaleSize(1),
    borderBottomWidth: scaleSize(1),
    borderColor: 'grey',
  },
  reportTableRow: {
    padding: scaleSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  reportTableRowLightGrey: {
    padding: scaleSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'lightgray',
  },
  reportTableRowHighlight: {
    fontWeight: 'bold',
    padding: scaleSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: 'lightskyblue',
  },
  reportTableColumn: {
    flex: 1,
    alignItems: 'center',
  },
});

function mapStateToProps({ report }) {
  return { report };
}

export default connect(mapStateToProps, reportActions)(Report);